<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .xxx {
      width: 300px;
      height: 100px;
    }

    .hmbb {
      width: 80px;
      height: 80px;
      float: left;
      text-align: center;
      line-height: 90px;
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

    .ju {
      width: 80px;
      height: 80px;
      float: left;
      line-height: 90px;
      text-align: center;
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

    .see {
      width: 80px;
      height: 80px;
      line-height: 90px;
      float: left;
      text-align: center;
      border-right: 1px solid;
      border-bottom: 1px solid;
    }

  </style>
</head>

<body>
  <div id="click" class="xxx">
    <div class="hmbb" v-on:click="doHmbb" :style="bgc[hmbb]"><b>海绵宝宝</b></div>
    <div class="ju" v-on:click="doJu" :style="bgc[pig]"><b>猪猪女孩</b></div>
    <div class="see" v-on:click="doSee" :style="bgc[see]"><b>沙雕幼崽</b></div>
    <img :src="images[index]">
  </div>
  <script>
    let vm = new Vue({
      el: '#click',
      data: {
        images: ['./hmbb.jpg', './pig.jpg', './look.jpg'],
        index: '',
        bgc: ['background-color:yellow'],
        hmbb: "",
        pig: "",
        see: ""
      },
      methods: {
        doHmbb() {
          this.index = 0
          this.hmbb = 0
          this.pig = 1
          this.see = 1
        },
        doJu() {
          this.index = 1
          this.hmbb = 1
          this.see = 1
          this.pig = 0
        },
        doSee() {
          this.index = 2
          this.hmbb = 1
          this.see = 0
          this.pig = 1
        }
      }

    })

  </script>
</body>

</html>
